<template>
  <a-modal width="1000px" v-model:open="open" title="添加已有用户" @ok="handleOk" :confirmLoading="loading" :ok-text="'确定'" :cancel-text="'关闭'" @cancel="handleCancel">
    <common-search :col-layout="{xxl: 10, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
     <common-table
         style="max-height: 300px;overflow: auto;"
         :columns="columns"
         :dataSource="dataList"
         v-model:localPagination="page"
         @paginationChange="onPageChange"
         v-model:loading="loading"
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         :rowKey="(record) => record"
     >
     </common-table>
  </a-modal>
</template>
<script setup>
import {computed,ref } from "vue";
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {getUserList} from "@/api/system/user.js";
import {addSysUserRole} from "@/api/system/role.js";
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  id:{
    type:String,
    default:''
  }
})
const emit = defineEmits(['close'])
const open = computed(() => props.open)
const selectedRowKeys = ref([])
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getUserList,
  queryFactory: () => ({
    column:'createTime',
    order:'desc'
  }),
})
const formItems = [
  {
    label: '用户账号',
    field: 'username',
    type: 'input',
  }
]
const columns = [
  {
    title: '用户账号',
    align: "center",
    width: 100,
    dataIndex: 'username'
  },
  {
    title: '用户名称',
    align: "center",
    width: 100,
    dataIndex: 'realname'
  },
  {
    title: '性别',
    align: "center",
    width: 100,
    dataIndex: 'sex_dictText'
  },
  {
    title: '电话',
    align: "center",
    width: 100,
    dataIndex: 'phone'
  },
  {
    title: '部门',
    align: "center",
    width: 150,
    dataIndex: 'orgCode'
  }
]
const handleOk = async () => {
  try {
    loading.value = true
    const res = await addSysUserRole({
      roleId:props.id,
      userIdList:selectedRowKeys.value.map(item=>item.id)
    })
    emit('close')
  } catch(error) {

  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  emit('close')
}
/**
 * 选择行事件
 * @param e {selectedRowKeys: Array<string>, selectedRows: Array<Object>}
 */
const onSelectChange = (e) => {
  selectedRowKeys.value = e
  console.log(selectedRowKeys.value)
}
</script>

<style scoped>

</style>
